<template>
	<div style="padding: 20px;"> 
        <!-- -------------------------------------------查询条件--------------------------------------------- -->			
		<el-collapse v-model='activeCollapse'>
			<el-collapse-item title='查询条件' name='search'>
				<el-form ref='searchCondition' :model='filter' label-width='80px' label-position=‘left’>
					<el-row>
						<el-col :span='6'>
							<el-form-item label='学生姓名' prop='studentName'>
								<el-input  v-model='filter.studentName' :clearable='true'  placeholder="姓名"></el-input>
							</el-form-item>
						</el-col> 
						<el-col :span='6' style="marginLeft:20px;">
                            <el-button icon="search" @click='handleSearch' type='primary'>查询</el-button>
					        <el-button  @click='resetForm("searchCondition")'>重置</el-button>
						</el-col>
					</el-row> 
				</el-form> 
			</el-collapse-item>
		</el-collapse> 
		<!-- -------------------------------------------学生列表--------------------------------------------- -->
			<div>  
				<div style='margin-bottom: 20px'>
					<el-table :data='studentData' width='100%' border>
						<el-table-column type='index' width='65'></el-table-column>
						<el-table-column label='学生编号'  width='200'>  
		<template slot-scope="scope">
        <i class="el-icon-user-solid"></i>
          <span  style="margin-left: 10px">{{ scope.row.studentNo }}</span>
        </template>
		</el-table-column>
		<el-table-column label='学生姓名'  width='150' align="center">
                        <template slot-scope="scope">
                        <span style="">{{ scope.row.studentName }}</span>
                        </template>
		</el-table-column>
		<el-table-column label='班级名称'  width='150' align="center">
                         <template slot-scope="scope">
                         <span style="">{{ scope.row.className }}</span>
                         </template>
		</el-table-column>
		<el-table-column label='所属年级'  width='150' align="center">
						 <template slot-scope="scope">
                         <span style="">{{ scope.row.gradate }}</span>
                         </template>
		</el-table-column>  
		<el-table-column label='班主任'  width='100' align="center">
			             <template slot-scope="scope">
                         <span style="">{{ scope.row.masterName }}</span>
                         </template>
		</el-table-column>
						<el-table-column label='操作' prop='operate' align="center">
							<template slot-scope="scope">
						        <el-button @click="delStu(scope)" type="danger" size="primary" icon="delete">删除</el-button> 
						    </template>
						</el-table-column> 
					</el-table>
				</div>
		
				<el-row type='flex' justify='end'>
					<el-pagination
						@size-change='handlePageSizeChange'
						@current-change='handleCurrentChange'
						:current-page='pagination.current'
						:page-sizes='[10, 20, 50, 100]'
						:page-size='pagination.pageSize'
						:total='pagination.total'
						layout='prev,pager,next,jumper,total,sizes'
					></el-pagination>
				</el-row>
			</div>  
	</div>
</template>
<script type="text/javascript">
  
    import data from './data'
    import methods from './method'

	export default{
		data(){
			return data.init();
		},
		methods:methods,
		mounted(){
			this.getTableData();
		},
	}
</script>
<style type="text/css"> 
</style>